<template>
  <div>
    <top></top>
    <div class="main-content repay">
        <div class="mc-left_title">
          <span>还款</span>
        </div>
        <el-form :model="repayForm" :inline="true" ref="repayForm">
          <div class="repay-item">
            <div class="hb-top">
              <div class="ht-item">
              </div>
            </div>
            <div class="hb-top">
              <div class="ht-item">
                <span class="hi-bottom">信贷编号</span><br>
                <span class="hi-left hi-middle">LLT099821874501</span>
              </div>
            </div>
            <div class="hb-top">
              <div class="ht-item">
                <span class="hi-bottom">贷款总额（元）</span><br>
                <span class="hi-left">{{vMoney.decode(repayForm.loanTotal,2)}}</span>
              </div>
            </div>
            <div class="hb-top">
              <div class="ht-item">
                <span class="hi-bottom">在贷金额（元）</span><br>
                <span class="hi-left">{{vMoney.decode(repayForm.inLoanMoney,2)}}</span>
              </div>
            </div>
            <div class="hb-top">
              <div class="ht-item">
              </div>
            </div>
          </div>
          <div class="tsd-base">
            <div class="ab-input bb-input">
              <span class="svg-container svg-money"><icon-svg icon-class="renminbi"></icon-svg></span>
              <el-form-item prop="repayVal" class="loan-account">
                <el-input class="ai-input ai-input_capital" v-model="repayForm.repayVal"></el-input>
              </el-form-item>
              <span class="svg-container svg-add">
              <icon-svg icon-class="iconfont707"></icon-svg>
              利息
            </span>
              <el-form-item prop="loanLxMoney">
                <el-input class="ai-input ai-input_rate" v-model="repayForm.loanLxMoney">
                  <template slot="append">
                    <i
                      class="el-icon-warning el-input__icon"
                      slot="suffix"
                      @click="handleIconClick">
                    </i>
                    <el-popover popper-class="popover-tips"
                                placement="top"
                                width="200"
                                trigger="click"
                                content="输入的还款金额需大于零">
                      <el-button slot="reference"></el-button>
                    </el-popover>
                  </template>
                </el-input>
              </el-form-item>
            </div>
            <div class="ab-input cb-input">
              <span>总金额 </span>
              <span>{{vMoney.decode(repayForm.repayTotal,2)}}</span>
              <span>元</span>
            </div>
            <el-form-item prop="selectedAccount" :rules="vType('','还款账户',true,'change')">
              <el-radio-group v-model="repayForm.selectedAccount">
                <div class="ab-input db-input">
                  <el-radio label="1" class="repay-radio" border>
                    <span>一般结算户</span>
                    <span>8989 **** **** 9900</span>
                  </el-radio>
                </div>
                <div class="ab-input db-input">
                  <el-radio label="2" class="repay-radio" border>
                    <span>&#12288;退税专户</span>
                    <span>8989 **** **** 9900</span>
                  </el-radio>
                </div>
              </el-radio-group>
            </el-form-item>
          </div>
        </el-form>
        <div class="tsd-bottom">
          <el-button type="warning" class="fir-btn sec-btn confirm-btn search-btn">立即还款</el-button>
        </div>
      </div>
  </div>
</template>

<script>
  import Top from '@/components/layout/top';
  export default {
    data() {
      return {
        repayForm:{
          defaultLx: '',
          rate: '0.0003',
          loanTotal: '28201000.00',
          inLoanMoney: '61000.00',
          selectedAccount: '',
          loanLxMoney: '',
          repayVal: '',//还款本金
          repayTotal: '' //还款总金额
        }
      };
    },
    components: {
      Top
    },
    mounted(){

    },
    methods: {

      handleIconClick(e) {

      }
    }
  }
</script>

<style lang="scss">
  .repay {
    min-height:calc(100vh - 108px);
    .ab-input{
      margin-top: 18px;
      .svg-money{
        position: relative;
        top: 0px;
        .svg-icon{
          font-size: 20px;
          position: relative;
          top: 6px;
        }
      }
      .svg-add{
        position: relative;
        top: 2px;
        left: -5px;
        display: inline-block;
        width: 70px;
        height: 40px;
        line-height: 40px;
        color: #C0C0C0;
        padding-left: 0;
        font-size: 14px;
        /*border-top: 1px solid #dcdfe6;*/
        border-bottom: 1px solid #dcdfe6;
        background: white;
        z-index: 22;
        .svg-icon{
          font-size: 14px;
          color: #C0C0C0;
        }
      }
      .ai-input{
        width: 222px;
        input{
          border-right: 0;
          border-left: 0;
          border-top: 0;
          border-radius: 0;
        }
        .el-input-group__append{
          border-right: 0;
          border-left: 0;
          border-top: 0;
          border-radius: 0;
          background-color: white;
        }
      }
      .ai-input_capital{
        font-size: 30px;
        input{color: #D9D9D9;}
      }
      .ai-input_rate{
        width: 120px;
        font-size: 14px;
        position: relative;
        left: -12px;
        input{
          color: #C0C0C0;
        }
      }
      .el-input__icon{
        line-height: normal;
        color: #FFA01D;
      }
    }
    .bb-input{
      .el-input.is-active .el-input__inner,
      .el-input__inner:focus{
        border-color: #dcdfe6;
      }
      .el-input-group__append{
        padding: 0 1px 0 7px;
      }
      .el-form-item{
        margin-right: 0;
      }
      .loan-account{
        margin-top: 1px;
      }
    }
    .cb-input{
      color: #FFA01D;
      font-size: 12px;
      margin-top: 0px;
    }
    .db-input{
      margin-top: 20px;
      .el-radio.is-bordered.is-checked{
        border-color: #FFA01D;
        span{
          color: #FFA01D;
        }
        .el-radio__input.is-checked .el-radio__inner{
          border-color: #FFA01D;
          background: #FFA01D;;
        }
      }
      /*.el-radio__inner:hover{
        border-color: #dcdfe6;
      }*/
      .repay-radio{
        width: 298px; height: 40px
      }
    }
    .repay-item{
      width: 100%;
      padding: 0 40px;
      height: 95px;
      margin: 12px auto 10px auto;
      .hb-top{
        width: 20%;
        float: left;
        .ht-title{
          border: 1px solid #FFA01D;
          color: #FFA01D;
          padding: 2px 10px;
          border-radius: 4px;
          font-size: 14px;
          margin-left: 16px;
        }
        .ht-item{
          margin-top: 2px;
          text-align: center;
          .hi-left{
            color: #FFA01D;
            font-size: 20px;
            font-weight: bolder;
          }
          .hi-middle{
            font-size: 12px;
            font-weight: normal;
            color: #6C6C6C;
          }
          .hi-right{
            color: #FFA01D;
            font-size: 14px;
          }
          .hi-bottom{
            font-size: 14px;
            padding-top: 8px;
            color: #6C6C6C;
            display: block;
          }
        }
        .ht-last{
          margin-left: 40px;
        }
      }
    }
    .repay-base {
      font-size: 14px;
      width: 100%;
      text-align: center;
      margin-top: 20px;
      .confirm-btn {
        float: inherit;
        text-align: center;
        width: 200px;
        background-color: #FFA01D;
      }
    }
    .repay-top {
      text-align: left;
      height: 52px;
      border-bottom: 1px solid #FFA01D;
      span{
        width: 50%;float: left;display: block;font-weight: bold;
      }
      span:first-child {
        font-size: 18px;
        color: #6C6C6C;
        text-align: left;
      }
      span:last-child {
        font-size: 16px;
        color: #6C6C6C;
        text-align: left;
        padding-top: 8px;
        padding-right: 40px;
      }

    }
    .tsd-bottom{
      margin-top: 18px;
      .search-btn {
        background: #FF8C59;
      }
    }
  }
</style>
